<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑导航菜单</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        .nav-item {
            transition: all 0.3s ease;
        }
        .nav-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        .drag-handle {
            cursor: move;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-store-decoration.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">编辑导航菜单</h1>
                <button onclick="saveNavigation()" class="text-white hover:opacity-80">
                    <i class="fas fa-save text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Navigation Preview -->
        <div class="p-4 bg-gray-50 border-b border-gray-200">
            <h3 class="text-sm font-medium text-gray-700 mb-2">预览效果</h3>
            <div class="bg-white rounded-lg p-3 shadow-sm">
                <div class="grid grid-cols-4 gap-3" id="navPreview">
                    <div class="text-center">
                        <div class="w-10 h-10 mx-auto bg-blue-100 rounded-lg flex items-center justify-center mb-1">
                            <i class="fas fa-tags text-blue-600"></i>
                        </div>
                        <p class="text-xs text-gray-700">分类</p>
                    </div>
                    <div class="text-center">
                        <div class="w-10 h-10 mx-auto bg-green-100 rounded-lg flex items-center justify-center mb-1">
                            <i class="fas fa-search text-green-600"></i>
                        </div>
                        <p class="text-xs text-gray-700">搜索</p>
                    </div>
                    <div class="text-center">
                        <div class="w-10 h-10 mx-auto bg-orange-100 rounded-lg flex items-center justify-center mb-1">
                            <i class="fas fa-fire text-orange-600"></i>
                        </div>
                        <p class="text-xs text-gray-700">热卖</p>
                    </div>
                    <div class="text-center">
                        <div class="w-10 h-10 mx-auto bg-purple-100 rounded-lg flex items-center justify-center mb-1">
                            <i class="fas fa-percent text-purple-600"></i>
                        </div>
                        <p class="text-xs text-gray-700">优惠</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Navigation Management -->
        <div class="h-[calc(852px-320px)] overflow-y-auto pb-40">
            <!-- Navigation List -->
            <div class="p-4">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-semibold flex items-center">
                        <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                        导航菜单 (8/10)
                    </h3>
                    <button onclick="addNavItem()" class="text-indigo-600 text-sm hover:text-indigo-700">
                        <i class="fas fa-plus mr-1"></i>添加菜单
                    </button>
                </div>

                <div class="space-y-3" id="navList">
                    <!-- Nav Item 1 -->
                    <div class="nav-item bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center space-x-3">
                            <div class="drag-handle text-gray-400">
                                <i class="fas fa-grip-vertical"></i>
                            </div>
                            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-tags text-blue-600"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-1">
                                    <p class="text-sm font-medium">商品分类</p>
                                    <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">已启用</span>
                                </div>
                                <p class="text-xs text-gray-500">跳转: categories.html</p>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="editNavItem(1)" class="text-blue-600 hover:text-blue-700">
                                    <i class="fas fa-edit text-sm"></i>
                                </button>
                                <button onclick="deleteNavItem(1)" class="text-red-600 hover:text-red-700">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Nav Item 2 -->
                    <div class="nav-item bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center space-x-3">
                            <div class="drag-handle text-gray-400">
                                <i class="fas fa-grip-vertical"></i>
                            </div>
                            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-search text-green-600"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-1">
                                    <p class="text-sm font-medium">搜索商品</p>
                                    <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">已启用</span>
                                </div>
                                <p class="text-xs text-gray-500">跳转: search.html</p>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="editNavItem(2)" class="text-blue-600 hover:text-blue-700">
                                    <i class="fas fa-edit text-sm"></i>
                                </button>
                                <button onclick="deleteNavItem(2)" class="text-red-600 hover:text-red-700">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Nav Item 3 -->
                    <div class="nav-item bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center space-x-3">
                            <div class="drag-handle text-gray-400">
                                <i class="fas fa-grip-vertical"></i>
                            </div>
                            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-fire text-orange-600"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-1">
                                    <p class="text-sm font-medium">热销商品</p>
                                    <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">已启用</span>
                                </div>
                                <p class="text-xs text-gray-500">跳转: hot-products.html</p>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="editNavItem(3)" class="text-blue-600 hover:text-blue-700">
                                    <i class="fas fa-edit text-sm"></i>
                                </button>
                                <button onclick="deleteNavItem(3)" class="text-red-600 hover:text-red-700">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Nav Item 4 -->
                    <div class="nav-item bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center space-x-3">
                            <div class="drag-handle text-gray-400">
                                <i class="fas fa-grip-vertical"></i>
                            </div>
                            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-percent text-purple-600"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-1">
                                    <p class="text-sm font-medium">优惠活动</p>
                                    <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">已启用</span>
                                </div>
                                <p class="text-xs text-gray-500">跳转: promotions.html</p>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="editNavItem(4)" class="text-blue-600 hover:text-blue-700">
                                    <i class="fas fa-edit text-sm"></i>
                                </button>
                                <button onclick="deleteNavItem(4)" class="text-red-600 hover:text-red-700">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- More nav items can be added here -->
                    <div class="nav-item bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center space-x-3">
                            <div class="drag-handle text-gray-400">
                                <i class="fas fa-grip-vertical"></i>
                            </div>
                            <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-heart text-pink-600"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-1">
                                    <p class="text-sm font-medium">我的收藏</p>
                                    <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">已禁用</span>
                                </div>
                                <p class="text-xs text-gray-500">跳转: my-favorites.html</p>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="editNavItem(5)" class="text-blue-600 hover:text-blue-700">
                                    <i class="fas fa-edit text-sm"></i>
                                </button>
                                <button onclick="deleteNavItem(5)" class="text-red-600 hover:text-red-700">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Layout Settings -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                    布局设置
                </h3>
                <div class="bg-white rounded-lg border border-gray-200 p-4">
                    <div class="space-y-4">
                        <!-- Grid Columns -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">每行显示个数</label>
                            <select id="gridColumns" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                                <option value="3">3个</option>
                                <option value="4" selected>4个</option>
                                <option value="5">5个</option>
                            </select>
                        </div>

                        <!-- Icon Style -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">图标样式</label>
                            <div class="grid grid-cols-3 gap-2">
                                <button class="p-2 border border-indigo-500 rounded-lg bg-indigo-50" onclick="selectIconStyle('rounded')">
                                    <div class="w-8 h-8 mx-auto bg-indigo-100 rounded-lg flex items-center justify-center mb-1">
                                        <i class="fas fa-home text-indigo-600 text-xs"></i>
                                    </div>
                                    <p class="text-xs">圆角</p>
                                </button>
                                <button class="p-2 border border-gray-300 rounded-lg" onclick="selectIconStyle('circle')">
                                    <div class="w-8 h-8 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-1">
                                        <i class="fas fa-home text-gray-600 text-xs"></i>
                                    </div>
                                    <p class="text-xs">圆形</p>
                                </button>
                                <button class="p-2 border border-gray-300 rounded-lg" onclick="selectIconStyle('square')">
                                    <div class="w-8 h-8 mx-auto bg-gray-100 flex items-center justify-center mb-1">
                                        <i class="fas fa-home text-gray-600 text-xs"></i>
                                    </div>
                                    <p class="text-xs">方形</p>
                                </button>
                            </div>
                        </div>

                        <!-- Show Text -->
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium">显示文字</p>
                                <p class="text-xs text-gray-500">图标下方显示文字</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" checked class="sr-only peer" id="showText">
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Fixed Bottom Action Bar -->
        <div class="absolute bottom-1 left-0 right-0 bg-white border-t border-gray-200 p-4">
            <div class="flex space-x-3">
                <button onclick="previewNavigation()" class="bg-gray-100 text-gray-700 font-medium px-4 py-3 rounded-xl hover:bg-gray-200 transition-colors">
                    <i class="fas fa-eye mr-2"></i>预览
                </button>
                <button onclick="saveNavigation()" class="flex-1 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium py-3 rounded-xl shadow-lg hover:shadow-xl transition-all duration-200">
                    <i class="fas fa-save mr-2"></i>保存设置
                </button>
            </div>
        </div>

    </div>

    <script>
        // Navigation management functions
        function addNavItem() {
            if (document.querySelectorAll('.nav-item').length >= 10) {
                showToast('最多只能添加10个导航菜单');
                return;
            }
            
            const iconOptions = [
                { icon: 'fas fa-gift', name: '礼品', color: 'red' },
                { icon: 'fas fa-star', name: '精选', color: 'yellow' },
                { icon: 'fas fa-crown', name: 'VIP', color: 'purple' },
                { icon: 'fas fa-bolt', name: '闪购', color: 'blue' }
            ];
            
            const choice = prompt('选择导航类型：\n\n1. 礼品中心\n2. 精选推荐\n3. VIP专区\n4. 闪购活动\n\n请输入序号 (1-4):');
            
            if (choice >= 1 && choice <= 4) {
                const selected = iconOptions[choice - 1];
                showToast(`正在添加${selected.name}导航...`);
                setTimeout(() => {
                    showToast('导航添加成功');
                    addNewNavItem(selected);
                }, 1000);
            }
        }

        function addNewNavItem(item) {
            const navList = document.getElementById('navList');
            const newNav = document.createElement('div');
            newNav.className = 'nav-item bg-white rounded-lg border border-gray-200 p-3';
            newNav.innerHTML = `
                <div class="flex items-center space-x-3">
                    <div class="drag-handle text-gray-400">
                        <i class="fas fa-grip-vertical"></i>
                    </div>
                    <div class="w-12 h-12 bg-${item.color}-100 rounded-lg flex items-center justify-center">
                        <i class="${item.icon} text-${item.color}-600"></i>
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between mb-1">
                            <p class="text-sm font-medium">${item.name}</p>
                            <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">已启用</span>
                        </div>
                        <p class="text-xs text-gray-500">跳转: 未设置</p>
                    </div>
                    <div class="flex space-x-2">
                        <button onclick="editNavItem(${Date.now()})" class="text-blue-600 hover:text-blue-700">
                            <i class="fas fa-edit text-sm"></i>
                        </button>
                        <button onclick="deleteNavItem(${Date.now()})" class="text-red-600 hover:text-red-700">
                            <i class="fas fa-trash text-sm"></i>
                        </button>
                    </div>
                </div>
            `;
            navList.appendChild(newNav);
            updateNavCount();
        }

        function editNavItem(id) {
            const options = [
                '修改图标',
                '编辑标题',
                '设置跳转链接',
                '启用/禁用'
            ];
            
            const choice = prompt(`编辑导航选项：\n\n1. ${options[0]}\n2. ${options[1]}\n3. ${options[2]}\n4. ${options[3]}\n\n请输入序号 (1-4):`);
            
            if (choice >= 1 && choice <= 4) {
                showToast(`正在${options[choice - 1]}...`);
                setTimeout(() => {
                    showToast('编辑完成');
                }, 1000);
            }
        }

        function deleteNavItem(id) {
            if (confirm('确认删除这个导航菜单吗？\n\n删除后无法恢复。')) {
                showToast('正在删除...');
                setTimeout(() => {
                    showToast('导航菜单已删除');
                    updateNavCount();
                }, 1000);
            }
        }

        function updateNavCount() {
            const count = document.querySelectorAll('.nav-item').length;
            document.querySelector('h3 .font-semibold').innerHTML = `
                <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                导航菜单 (${count}/10)
            `;
        }

        function selectIconStyle(style) {
            // Remove selected state from all buttons
            document.querySelectorAll('[onclick^="selectIconStyle"]').forEach(btn => {
                btn.className = 'p-2 border border-gray-300 rounded-lg';
            });
            
            // Add selected state to clicked button
            event.target.closest('button').className = 'p-2 border border-indigo-500 rounded-lg bg-indigo-50';
            
            showToast(`已选择${style === 'rounded' ? '圆角' : style === 'circle' ? '圆形' : '方形'}样式`);
        }

        function previewNavigation() {
            showToast('正在生成导航预览...');
            setTimeout(() => {
                showToast('预览功能开发中，敬请期待');
            }, 1000);
        }

        function saveNavigation() {
            const settings = {
                gridColumns: document.getElementById('gridColumns').value,
                showText: document.getElementById('showText').checked
            };

            showToast('正在保存导航设置...');
            
            setTimeout(() => {
                showToast('导航设置保存成功！');
                setTimeout(() => {
                    window.location.href = 'b2b-store-decoration.html';
                }, 1000);
            }, 1500);
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('导航菜单编辑器已加载');
        });
    </script>
</body>
</html>